//1.引入样式表
//公用样式 
require('../../assets/css/index.less');
require('../../assets/fonts/iconfont.css');

// 引入weUI
//引入样式
require('../../lib/weui/weui.css');
//引入js库
let weui = require('../../lib/weui/weui.js');


// 当前页面样式
require('./personal.less')

//2.引入工具函数 utils
const dom = require('../../utils/dom');
const https = require('../../utils/https');
const local = require('../../utils/local');

// 3.当前页面的js
dom.ready(function () {


    //返回功能
    dom.addEvent('#backBtn', function () {
        history.go(-1)
    })
    // 功能一: 图像上传简单交互
    //点击图像让input进行click事件
    dom.addEvent('#picBtn', function () {
        //console.dir展开对象---作用查看当前指定对象身上有哪些属性和方法
        // console.dir(dom.getEle('#fileBtn'));
        //触发当前file标签上的click事件
        dom.getEle('#fileBtn').click()
    })

    //功能二: 头像上传实现--基本功能
    let imgUrl;
    //1.注册file监听改变事件
    dom.addEvent('#fileBtn', function () {
        //2.获取当前用户输入的文件源
        //    let files=this.files[0];

        //调用上传功能
        dom.upLoadPic('/api/circles/uploadImg', 'file', this.files[0], function (res) {
            //5.判定
            if (res.errno == 0) {
                //6.把已经上传好的头像放到指定位置
                dom.getEle('#picBtn').src = 'http://fitness.h5.itsource.cn:3701' + res.data.url;

                //保存上传的图像到全局变量
                imgUrl = res.data.url
            }
        })

    }, 'change')

    //选择性别
    dom.addEvent('#sexBtn', function () {
        weui.picker([{
            label: '男',
            value: 0
        },
        {
            label: '女',
            value: 1
        }], {
            onConfirm: function (result) {
                //    console.log('确认时触发===>',result[0])
                //添加选中的值到指定位置
                dom.getEle('#sexTxt').innerHTML = result[0].label;
            },
            title: '请选择性别'
        });
    })



    //选择生日
    dom.addEvent('#birBtn', function () {
        weui.datePicker({
            start: 1950,
            end: new Date().getFullYear(),
            onConfirm: function (result) {
                // console.log(result);
                //处理数据结构
                let birDate = result.map(v => dom.formatDate(v.value)).join('-')
                // console.log(birDate);
                //添加选中的值到指定位置
                dom.getEle('#birTxt').innerHTML = birDate
            },
            title: '请选择生日'
        });
    })


    //请选择省份
    let proviceData;
    //1.绑定点击事件
    dom.addEvent('#proBtn', function () {
        //2.获取后端省份数据
        https.get('/api/shared/province', function (res) {
            //3.解构赋值
            let { errno, data } = res;

            //4.判定
            if (errno == 0) {
                // console.log(data);
                //组装 picker
                /*
                    picker数据格式必需为以下格式:
                        {
                            label: '男',
                            value: 0
                        }
                
                
                */
                //5.处理数据--原版 [{id:,name:}]===>[{value:,label:}]
                let proData = data.map(v => {
                    return {
                        value: v.id,
                        label: v.name
                    }
                })
                //6.picker实现
                weui.picker(proData, {
                    onConfirm: function (result) {
                        console.log('确认时触发===>', result[0])
                        //7.添加选中的值到指定位置
                        dom.getEle('#proTxt').innerHTML = result[0].label;
                        //8.保存当前用户选中的省份
                        proviceData = result[0];
                    },
                    title: '请选择省份'
                });
            }
        })


    })


    //请选择城市
    let cData;
    //1.绑定点击事件
    dom.addEvent('#cityBtn', function () {
        //判定---只有proviceData有数据时,才进行下面城市选择
        if (proviceData) {
            //2.获取后端省份数据
            https.get('/api/shared/city?provinceId=' + proviceData.value, function (res) {
                //3.解构赋值
                let { errno, data } = res;

                //4.判定
                if (errno == 0) {
                    //5.处理数据--原版 [{id:,name:}]===>[{value:,label:}]
                    let cityData = data.map(v => {
                        return {
                            value: v.id,
                            label: v.name
                        }
                    })
                    //6.picker实现
                    weui.picker(cityData, {
                        onConfirm: function (result) {
                            //    console.log('确认时触发===>',result[0])
                            //7.添加选中的值到指定位置
                            dom.getEle('#cityTxt').innerHTML = result[0].label;
                            //保存city的数据到全局
                            cData = result[0]
                        },
                        title: '请选择城市'
                    });
                }
            })
        } else {
            weui.alert('请先选择省份')
        }


    })


    //个人简介
    //1.绑定事件
    dom.addEvent('#infoBtn', function () {
        //2.获取当前用户输入的长度
        let len = this.value.length;
        //3.把长度给到 infoNum
        dom.getEle('#infoNum').innerHTML = len;
        //4.判定  如果字符串长度大于200 只保留前200个字符 
        if (len > 200) {
            dom.getEle('#infoBtn').value = this.value.slice(0, 200);
            //设置到字符串个数为200时,手动写死数字
            dom.getEle('#infoNum').innerHTML = 200;
        }

    }, 'input')


    //保存修改个人信息
    dom.addEvent('#saveBtn', function () {
        //初学者需要先获取数据
        // let userInfo={
        //     imgUrl:imgUrl,
        //     nickName:dom.getEle('#nickTxt').value,
        //     gender:dom.getEle('#sexTxt').innerHTML=='男'?0:1,
        //     birthday:dom.getEle('#birTxt').innerHTML,
        //     provinceId:proviceData.value,
        //     cityId:cData.value,
        //     sign:dom.getEle('#infoBtn').value,
        // }

        // console.log(userInfo);

        //发送ajax
        https.post('/api/user/changeInfo', {
            imgUrl: imgUrl,
            nickName: dom.getEle('#nickTxt').value,
            gender: dom.getEle('#sexTxt').innerHTML == '男' ? 0 : 1,
            birthday: dom.getEle('#birTxt').innerHTML,
            provinceId: proviceData.value,
            cityId: cData.value,
            sign: dom.getEle('#infoBtn').value,
        }, function (res) {
            console.log(res);
            //判定
            if (res.errno == 0) {
                //提示
                weui.toast('保存成功', 3000);
                //更新token
                local.set('tk', res.data.token)
                //跳转到 我的页面
                location.href = 'my.html'
            } else {
                weui.toast('保存失败', 3000);
            }
        })
    })

    //把本地数据渲染到网页中
    function rander() {
        //获取本地数据
        let localData = local.get('userData');;
        let { nickName, gender, birthday, sign, provinceId, cityId } = localData;


        //头像
        dom.getEle('#picBtn').src = 'http://fitness.h5.itsource.cn:3701' + localData.imgUrl;
        imgUrl = localData.imgUrl;

        dom.getEle('#nickTxt').value = nickName;//昵称
        dom.getEle('#sexTxt').innerHTML = gender == 1 ? '女' : '男';//性别
        dom.getEle('#birTxt').innerHTML = birthday;//生日
        dom.getEle('#infoBtn').value = sign;//个人简介

        //查找省份和城市
        getPos('#proTxt', provinceId, '#cityTxt', cityId)

    }

    //调用
    rander()

    //扩展---了解: 通过id来查找对应的中文
    function getPos(obj1, pD, obj2, cD) {
        //查找省份
        https.get('/api/shared/province', function (res) {
            // console.log(res);
            if (res.errno == 0) {
                // console.log(res.data);
                //过滤出当前provinceId对应的数据
                let pData = res.data.filter(v => {
                    return v.id == pD;
                })

                //设置省份到指定位置
                dom.getEle(obj1).innerHTML = pData[0].name;
                //把省份信息设置到全局变量中
                proviceData = {
                    label: pData[0].name,
                    value: pData[0].id
                }
                //查找城市
                https.get('/api/shared/city?provinceId=' + pData[0].id, function (res) {
                    // console.log(res);
                    if (res.errno == 0) {
                        // console.log(res.data);
                        //过滤出当前cityId对应的数据
                        let ccData = res.data.filter(v => {
                            return v.id == cD;
                        })

                        //设置省份到指定位置
                        dom.getEle(obj2).innerHTML = ccData[0].name;

                        //把城市信息设置到全局变量中
                        cData = {
                            label: ccData[0].name,
                            value: ccData[0].id
                        }
                    }
                })
            }
        })
    }











})